Layout - width and max-width

Using width, max-width and margin: auto;

As mentioned in the previous chapter; a block-level element always takes up the full width available (stretches out to the left and right as far as it can).

All the icons in the icon libraries below, are scalable vectors that can be customized with CSS (size, color, shadow, etc.)

Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins:

Example


    
            <!DOCTYPE html>
            <html>
            <head>
            <style>
            div.ex1 {
              width: 500px;
              margin: auto;
              border: 3px solid #73AD21;
            }
            
            div.ex2 {
              max-width: 500px;
              margin: auto;
              border: 3px solid #73AD21;
            }
            </style>
            </head>
            <body>
            
            <h2>CSS Max-width</h2>
            
            <div class="ex1">ACADEMY OF INFORMATION TECHNOLOGY</div>
            <br>
            
            <div class="ex2">ACADEMY OF INFORMATION TECHNOLOGY</div>
            
           
            
            </body>
            </html>

Result:

CSS Max-width

ACADEMY OF INFORMATION TECHNOLOGY